<template>
  <div class="light-container">
    <div class="light-header">
      <div class="light-top-left">
        <div v-for="item in buildingData" :key="item.id" class="light-top-item" :class="{'active': currentView == item.id}" @click="handleChangeBuilding(item)">{{ item.name }}</div>
      </div>
      <div class="light-top-right">
        <el-tooltip class="tooltip-wrap" placement="bottom">
          <div slot="content">
            温馨提示：<br/>
            绿色代表房间内已绑定设备,<br/>
            灰色代表房间未绑定设备,<br/>
            黄色代表房间内灯打开了<br/>
           </div>
          <img src="@/assets/images/bj-icon2.png" >
        </el-tooltip>
        <div class="light-top-item" :class="{'active': bed_type == ''}" @click="changeTabRoom({id: ''})">全部</div>
        <div class="light-top-item" v-for="item in bedType" :key="item.id" :class="{'active': bed_type == item.id}" @click="changeTabRoom(item)">
          {{ item.name }}
        </div>
      </div>

    </div>
    <div class="light-btn">
      <el-button type="primary" v-for="item in sceneList" :key="item.id" @click="handleSceneDone(item)">{{ item.name }}</el-button>
    </div>
    <div class="light-content">
      <div class="light-left-cont">
        <div v-for="item in floorData" :key="item.id" class="light-item" :class="{'active': currentFloorView == item.id}" @click="handleChangeFloor(item)">
          {{ item.name }}
        </div>
      </div>
      <el-row :gutter="20" class="zsx-wrap">
        <el-col v-for="(item,index) in roomList" :key="item.id" class="m-20" :xs="24" :sm="24" :md="12" :lg="6">
          <div class="care-list care-jujia-list">
          	<div class="care-item">
          		<div class="care-header care-jujia" :class="{'colorType0': item.device_list && item.device_list.length, 'colorType1': item.onoff == 'on' || item.onoff1 == 'on'}">
          			<span>{{ item.room_code }}房间</span>
          			 <button v-if="item.device_list && item.device_list.length" type="button" @click="devicebind(item, index)">设备列表</button>
          		</div>
          		<div class="care-content">
          			<div class="care-room">
          				<div class="care-room-name">卧室</div>
          				<div class="care-room-right">
          					<img src="@/assets/home/light.png" alt="">
          					<img v-show="false" src="@/assets/home/light-active.png" alt="">
          					<span>开/关</span>
          					<div class="switch-box">
          					    <div class="bg_con">
          					        <input :id="`checked_${item.id}`" type="checkbox" :checked="item.onoff == 'on'" class="switch" value="0" />
          					        <label :for="`checked_${item.id}`" @click="handleLabel(item)">
          										<span></span>
          									</label>
          					    </div>
          					</div>
          				</div>
                  <img v-if="item.yanwu" src="@/assets/bed-home/bj-icon4.png" alt="">
          			</div>
                <div class="care-room">
                	<div class="care-room-name">卫生间</div>
                	<div class="care-room-right">
                		<img src="@/assets/home/light.png" alt="">
                		<img v-show="false" src="@/assets/home/light-active.png" alt="">
                		<span>开/关</span>
                		<div class="switch-box">
                		    <div class="bg_con">
                		        <input :id="`checked_${item.id}_${item.id}`" :checked="item.onoff1 == 'on'" type="checkbox" class="switch" value="0" />
                		        <label :for="`checked_${item.id}_${item.id}`" @click="handleToiletLabel(item)">
                							<span></span>
                						</label>
                		    </div>
                		</div>
                	</div>
                  <!-- <img v-if="item.keran" src="@/assets/bed-home/bj-icon1.png" alt=""> -->
                  <img v-if="item.sos" src="@/assets/bed-home/bj-icon2.png" alt="">
                  <!-- <img v-if="item.anfang" src="@/assets/bed-home/bj-icon3.png" alt=""> -->
                  <img v-if="item.shuijin" style="" src="@/assets/bed-home/bj-icon5.png" alt="">
                  <img v-if="item.hongwai" src="@/assets/images/m_p.png" alt="">
                  <div v-if="item.menci" class="room-door" :class="{'room-jujia-door-move1': item.menci == 1,'room-jujia-door-move2': item.menci == 2}"></div>
                </div>
          		</div>
          	</div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 尉氏县 -->
    <el-dialog
      title="已设备绑定列表"
      :visible.sync="dialogVisibleysxEq"
      width="50%"
      :before-close="closeDialogEq"
      :close-on-click-modal="false"
      class="dialogForm"
    >
      <div class="dialog-main">
        <div class="table-do">
          <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              已绑定设备列表
            </el-col>
          </el-row>
        </div>
        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-table
              ref="table"
              :data="binddeviceList"
              :header-cell-style="{ backgroundColor: '#409EFF', color: '#fff' }"
              :row-class-name="tableRowClassName"
            >
              <el-table-column
                v-for="(item, index) in ysxtableColumns"
                :key="index"
                :prop="item.prop"
                :label="item.label"
                :width="item.width"
                :formatter="item.formatter"
                :filters="item.filters"
                :class-name="item.className"
                :show-overflow-tooltip="true"
              ></el-table-column>
              <el-table-column
               v-if="adminType == 9"
                label="操作"
                fixed="right"
                width="220"
              >
                <template slot-scope="scope">
                  <el-button
                    v-if="scope.row.type == '9'"
                    size="mini"
                    type="danger"
                    plain
                    @click="handleysxView(scope.row)"
                  >
                    查看
                  </el-button>
                  <el-button
                    v-if="scope.row.type == '1' || scope.row.type == '7'"
                    size="mini"
                    type="primary"
                    plain
                    @click="handleysxEdit(scope.row, 'on', scope.$index)"
                  >
                    打开
                  </el-button>
                  <el-button
                    v-if="scope.row.type == '1' || scope.row.type == '7'"
                    size="mini"
                    type="danger"
                    plain
                    @click="handleysxEdit(scope.row, 'off', scope.$index)"
                  >
                    关闭
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import { mapGetters, mapState } from "vuex"
  // import mixins from '@/utils/mixins.js';
  // import mixinstest from '@/utils/mixinstest.js';
  import { tenBitTimestamp } from '@/utils'
  import { getBedType } from "@/api/bedType"
  import { getBuilding, getFloor, getRoom, getdeviceList, getdevOnoff, getdevScene, getSceneDone, gatewayLogin } from "@/api/building";
  import { getdevscene, getdevsceneinfo, getdevscenedone } from "@/api/device"
  export default {
    name: "LightManage",
    components: {  },
    data() {
      return {
        //楼栋列表信息
        buildingData: [],
        //楼层列表信息
        floorData: [],
        //房间列表信息
        roomList: [],
        //目前的楼栋
        currentView: 0,
        //目前的楼层
        currentFloorView: 0,
        //设备列表显隐
        dialogVisibleysxEq: false,
        //绑定的设备
        binddeviceList: [],
        ysxtableColumns: [
          { prop: "host_id", label: "网关id" },
          { prop: "name", label: "设备名称" },
          { prop: "position", label: "设备位置" },
          { prop: "type", label: "设备类型", formatter: this.genderFormatter },
        ],
        //床位类型
        bedType: [],
        //接口切换使用类型
        bed_type: "",
        //楼层id
        floor_id: "",
        //情景列表
        sceneList: []
      };
    },
    computed: {
      ...mapGetters({
        adminType: "user/type"
      }),
      webSocketMsg() {
        return this.$store.state.websocket.webSocketMsg
      }
    },
    created() {

    },
    beforeDestroy() {},
    watch:{
        webSocketMsg:{
          handler: function(newVal) {
            this.init(newVal, this)
          }
        }
    },
    mounted() {
      this.getBuildingData();
      // //尉氏县网关登录
      gatewayLogin();
      this.getBedType();
      this.getdevscene();
    },
    methods: {
      //获取情景列表
      getdevscene(data) {
        getdevscene("get", data).then(res => {
          this.sceneList = res.data.list;
        })
      },
      handleSceneDone(item) {
       getdevscenedone("get", {id: item.id})
      },
      //根据床位切换房间类型
      changeTabRoom(item) {
        this.bed_type = item.id;
        this.getTableData(this.floor_id)
      },
      //获取床位类型
      getBedType() {
        getBedType("get").then(res => {
          this.bedType = res.data.list;
        })
      },
      //处理信息
      init(res, _that) {
        let result = JSON.parse(res)
        if(!result){
          return false
        }
        if(result.route == 'device_onoff') {
          let data = result.data;
          //灯光
          if(data.type == 1) {
            if(data.status == 'on') {
              _that.roomList.forEach((item, index) => {
                item.device_list.forEach((ite, idx) => {
                  if(ite.type == 1 && ite.code == data.device_id) {
                    if(ite.area_type == 2) {
                      _that.$set(_that.roomList[index], 'onoff1', 'on');
                    } else {
                      _that.$set(_that.roomList[index], 'onoff', 'on');
                    }
                    _that.$set(_that.roomList[index].device_list[idx], 'onoff', 'on');
                  }
                })
              })
            } else {
              let devIndex = 1;
              _that.roomList.forEach((item, index) => {
                item.device_list.forEach((ite, idx) => {
                  if(ite.type == 1 && ite.code == data.device_id) {
                    devIndex = index;
                    _that.$set(_that.roomList[index].device_list[idx], 'onoff', 'off');
                  }
                })
              })
              _that.$set(_that.roomList[devIndex], 'onoff', 'off');
              _that.$set(_that.roomList[devIndex], 'onoff1', 'off');
              _that.roomList[devIndex].device_list.forEach((item, index) => {
                if(item.type == 1 && item.onoff == 'on') {
                  if(item.area_type == 2) {
                    _that.$set(_that.roomList[devIndex], 'onoff1', 'on');
                  } else {
                    _that.$set(_that.roomList[devIndex], 'onoff', 'on');
                  }
                }
              })
            }
          }
          //sos
          if(data.type == 2) {
            _that.roomList.forEach((item, index) => {
              item.device_list.forEach((ite, idx) => {
                if(ite.type == 2 && ite.code == data.device_id) {
                  _that.$set(_that.roomList[index], 'sos', true);
                }
              })
            })
          }
          //门磁
          if(data.type == 3) {
            _that.roomList.forEach((item, index) => {
              item.device_list.forEach((ite, idx) => {
                if(ite.type == 3 && ite.code == data.device_id) {
                  if(data.status == 'on') {
                    _that.$set(_that.roomList[index], 'menci', 2);
                  } else {
                    _that.$set(_that.roomList[index], 'menci', 1);
                  }
                  _that.$set(_that.roomList[index].device_list[idx], 'onoff', data.status);
                }
              })
            })
          }
          //可燃气体
          if(data.type == 4) {
            _that.roomList.forEach((item, index) => {
              item.device_list.forEach((ite, idx) => {
                if(ite.type == 4 && ite.code == data.device_id) {
                  if(data.status == 1) {
                    _that.$set(_that.roomList[index], 'keran', true);
                  } else {
                    _that.$set(_that.roomList[index], 'keran', false);
                  }
                }
              })
            })
          }
          //红外
          if(data.type == 5) {
            _that.roomList.forEach((item, index) => {
              item.device_list.forEach((ite, idx) => {
                if(ite.type == 5 && ite.code == data.device_id) {
                  if(data.status == 1) {
                    _that.$set(_that.roomList[index], 'hongwai', true);
                  } else {
                    _that.$set(_that.roomList[index], 'hongwai', false);
                  }
                }
              })
            })
          }
          //烟雾
          if(data.type == 6) {
            _that.roomList.forEach((item, index) => {
              item.device_list.forEach((ite, idx) => {
                if(ite.type == 6 && ite.code == data.device_id) {
                  if(data.status == 1) {
                   _that.$set(_that.roomList[index], 'yanwu', true);
                  } else {
                   _that.$set(_that.roomList[index], 'yanwu', false);
                  }
                }
              })
            })
          }
          //水浸
          if(data.type == 8) {
            _that.roomList.forEach((item, index) => {
              item.device_list.forEach((ite, idx) => {
                if(ite.type == 8 && ite.code == data.device_id) {
                  if(data.status == 1) {
                   _that.$set(_that.roomList[index], 'shuijin', true);
                  } else {
                   _that.$set(_that.roomList[index], 'shuijin', false);
                  }
                }
              })
            })
          }
          //安防
          if(data.type == 10) {
            _that.roomList.forEach((item, index) => {
              item.device_list.forEach((ite, idx) => {
                if(ite.type == 10 && ite.code == data.device_id) {
                  if(data.status == 1) {
                    _that.$set(_that.roomList[index], 'anfang', true);
                  } else {
                    _that.$set(_that.roomList[index], 'anfang', false);
                  }
                }
              })
            })
          }
        }
      },
      //厕所开关
      handleToiletLabel(item) {
        item.device_list.length && item.device_list.forEach(ite => {
          if(ite.area_type == 2 && ite.type == 1) {
            getdevOnoff('get', {room_id: item.id, area_type: 2, onoff: ite.onoff == 'on' ? 'off' : 'on'})
          }
        })
      },
      //卧室开关
      handleLabel(item) {
        item.device_list.length && item.device_list.forEach(ite => {
          if(ite.area_type == 1 && ite.type == 1) {
            getdevOnoff('get', {room_id: item.id, area_type: 1, onoff: ite.onoff == 'on' ? 'off' : 'on'})
          }
        })
      },
      //设备类型
      genderFormatter(row) {
        let type = ""
        switch (row.type) {
          case 1:
            type = "灯"
            break;
          case 2:
            type = "SOS"
            break;
          case 3:
            type = "门禁"
            break;
          case 4:
            type = "可燃气体"
            break;
          case 5:
            type = "人体红外传感"
            break;
          case 6:
            type = "烟雾"
            break;
          case 7:
            type = "窗帘"
            break;
          case 8:
            type = "漏水检测"
            break;
          case 9:
            type = "温湿度检测"
            break;
          case 10:
            type = "安防报警"
            break;
          case 11:
            type = "床垫报警"
            break;
        }
        return type
      },
      //获取情景列表
      tableRowClassName({row}) {
        if (row.onoff == 'on' || row.onoff == 1) {
          return 'warning-row';
        }
        return '';
      },
      handleysxView(row) {
        this.dialogModalVisible = true;
        Api_ysxroom.ysxShowDevicestatus({host_id: "40aa568e24d5", ids: row.code})
      },
      handleysxEdit(row, onoff, index) {
        // 单个设备控制
        getdevOnoff('get', {onoff, code: row.code, type: row.type})
      },
      //关闭弹窗
      closeDialogEq() {
        this.dialogVisibleysxEq = false;
      },
      //查看设备列表
      devicebind(item, index) {
        getdeviceList('get', {room_id: item.id}).then(res => {
          let list = res?.data?.list || [];
          list.forEach(item => {
            let position = "";
            if(item.build_name) {
              position += item.build_name;
            }
            if(item.floor_name) {
              position += item.floor_name;
            }
            if(item.room_name) {
              position += item.room_name;
            }
            item.position = position;
          })
          this.binddeviceList = res.data.list;
          this.dialogVisibleysxEq = true;
          this.$nextTick(() => {
            this.$refs.table.doLayout()
          })
        })
      },
      //切换楼栋
      handleChangeBuilding(item) {
        let params = {
          building_id: item.id,
        };
        this.currentView = item.id;
        if (params.building_id) this.getFloorData(params);
      },
      //切换楼层
      handleChangeFloor(item) {
        let floor_id = item.id;
        this.currentFloorView = item.id;
        this.floor_id = item.id;
        if (floor_id) this.getTableData(floor_id);
      },
      //获取楼栋信息
      getBuildingData(data) {
        getBuilding("get", data).then((resp) => {
          if (resp.code === 200) {
            this.buildingData = resp?.data?.list.reverse() || [];
            this.building_id = this.buildingData[0].id;
            this.currentView = this.buildingData[0].id;
            this.activename = this.buildingData[0].name;
            let params = {
              building_id: this.building_id,
            };
            if (this.building_id) this.getFloorData(params);
          }
        });
      },
      //获取楼层信息
      getFloorData(data) {
        getFloor("get", data).then((resp) => {
          if (resp.code === 200) {
            this.floorData = resp?.data?.list || [];
            if (resp.data.list.length == 0) return;
            this.floor_id = this.floorData[0].id;
            this.currentFloorView = this.floorData[0].id;
            this.getTableData(resp.data.list[0].id);
          }
        });
      },
      //获取房间信息
      getTableData(floor_id) {
        this.selectForm = {
          page_size: 120,
          floor_id,
          bed_type: this.bed_type
        };

        getRoom("get", this.selectForm).then((resp) => {
          if (resp.code === 200) {
            const data = resp.data.list;
            data.forEach(item => {
              item.onoff = "off";
              item.onoff1 = "off";
              item.device_list.forEach(ite => {
                if(ite.type == 1) {
                  if(ite.onoff == 'on') {
                    if(ite.area_type == 2) {
                      item.onoff1 = 'on';
                    } else {
                      item.onoff = 'on';
                    }
                  }
                }
                if(ite.type == 2) {
                  if(ite.onoff == '1') {
                    item.keran = true;
                  } else {
                    item.keran = false;
                  }
                }
                if(ite.type == 3) {
                  if(ite.onoff == 'on') {
                    item.menci = 2;
                  } else if(ite.onoff == 'off') {
                    item.menci = 1;
                  } else {
                    item.menci = 3;
                  }
                }
                if(ite.type == 4) {
                  if(ite.onoff == '1') {
                    item.keran = true;
                  } else {
                    item.keran = false;
                  }
                }
                if(ite.type == 5) {
                  if(ite.onoff == '1') {
                    item.hongwai = true;
                  } else {
                    item.hongwai = false;
                  }
                }
                if(ite.type == 6) {
                  if(ite.onoff == '1') {
                    item.yanwu = true;
                  } else {
                    item.yanwu = false;
                  }
                }
                if(ite.type == 7) {
                  item.chuanglian = false;
                }
                if(ite.type == 8) {
                  if(ite.onoff == '1') {
                    item.shuijin = true;
                  } else {
                    item.shuijin = false;
                  }
                }
                if(ite.type == 9) {
                  item.wenshi = false;
                }
                if(ite.type == 10) {
                  if(ite.onoff == '1') {
                    item.anfang = true;
                  } else {
                    item.anfang = false;
                  }
                }
              })
            })
            this.roomList = data;
          }
        });
      }
    }
  };
</script>
<style lang="scss" scoped>
  .tooltip-wrap{
    width: 30px;
    float: left;
  }
  .room-jujia-door-move1{
    &::before{
      animation: move1 2s;
      -webkit-animation: move1 2s;
      animation-fill-mode: forwards;
      -webkit-animation-fill-mode: forwards;
      animation-timing-function: linear;
      -webkit-animation-timing-function: linear;
    }
  }

    .room-jujia-door-move2{
      &::before{
        animation: move2 2s;
        -webkit-animation: move2 2s;
        animation-fill-mode: forwards;
        -webkit-animation-fill-mode: forwards;
        animation-timing-function: linear;
        -webkit-animation-timing-function: linear;
      }
    }


    /*æ—‹è½¬ä»Ž0åº¦åˆ°360åº¦*/
    @keyframes move1 {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(-90deg);
        }
    }

    @keyframes move2 {
        from {
            transform: rotate(-90deg);
        }
        to {
            transform: rotate(0deg);
        }
    }
  .light-container{
    box-sizing: border-box;
    width: 100%;
    background: #fff;
    padding: 20px 50px !important;
    .dialog-main {
      .table-do {
        margin-bottom: 15px;
      }

      ::v-deep {
        th {
          .cell {
            color: #fff;
          }
        }
      }
    }
    .el-table{
      ::v-deep {
        .warning-row {
          background: oldlace;
        }
      }
    }
    .light-header{
      display: flex;
      justify-content: space-between;
      align-items: center;
      .light-top-left{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .light-top-item{
          cursor: pointer;
          font-size: 16px;
          font-weight: bold;
          line-height: 16px;
          color: #333333;
          padding-bottom: 3px;
          border-bottom: 2px solid #ffffff;
          &:hover{
            border-bottom: 2px solid #487EEA;
            color: #487EEA;
          }
          &:nth-child(n+2) {
            margin-left: 40px;
          }
        }
        .active{
          color: #487EEA;
          border-bottom: 2px solid #487EEA;
        }
      }
    }
    .light-btn{
      overflow: hidden;
      margin-top: 25px;
      // button{
      //   padding: 10px 18px;
      //   font-size: 16px;
      //   color: #ffffff;
      //   float: left;
      //   border: none;
      //   outline: none;
      //   border-radius: 2px;
      //   cursor: pointer;
      //   &:nth-child(n+2) {
      //     margin-left: 30px;
      //   }
      // }
      // .btn-primary{
      //   background-color: #487EEA;
      // }
      // .btn-success{
      //   background-color: #3BC8A6;
      // }
      // .btn-error{
      //   background-color: #FF566B;
      // }
    }
    .light-top-right{
      .light-top-item{
        padding: 8px 8px;
        font-size: 16px;
        color: #ffffff;
        float: left;
        border: none;
        outline: none;
        border-radius: 2px;
        cursor: pointer;
        background: #999999;
        border-radius: 2px;
        &:hover{
          background: #487EEA;
        }
        &:nth-child(n+2) {
          margin-left: 10px;
        }
      }
      .active{
        background: #487EEA;
      }
    }
    .light-content{
      overflow: hidden;
      margin-top: 15px;
      .light-left-cont{
        margin-top: 10px;
        float: left;
        width: 129px;
        min-height: 400px;
        position: relative;
        z-index: 1;
        .light-item{
          width: 129px;
          height: 40px;
          cursor: pointer;
          text-align: center;
          line-height: 40px;
          color: #ffffff;
          background: #999999;
          border-radius: 2px;
          &:hover{
            background: #487EEA;
          }
          &:nth-child(n+2) {
            margin-top: 15px;
          }
        }
        .active{
          background: #487EEA;
        }
      }
    }
    .zsx-wrap{
      padding-left: 160px;
      .m-20{
        margin: 10px 0;
      }
    }
    .care-list {
    	border-radius: 10px;
    }
    .care-header {
    	position: relative;
    	display: flex;
    	align-items: center;
    	color: #fff;
    	height: 70px;
    	line-height: 70px;
    	padding: 0 20px;
    	border-top-left-radius: 10px;
    	border-top-right-radius: 10px;
      background-color: #666666;
      button{
        width: 68px;
        height: 23px;
        background: #FFFFFF;
        border-radius: 2px;
        color: #F2AF4D;
        font-size: 13px;
        text-align: center;
        line-height: 23px;
        outline: none;
        border: none;
        cursor: pointer;
      }
    }

    .care-header span {
    	flex: 1;
    	text-align: left;
    	font-size: 20px;
    }

    .colorType0 {
    	background: #15A189;
    }

    .colorType1 {
    	background: #F2AF4D;
    }

    .care-room {
    	position: relative;
    	padding: 0 20px;
    	height: 90px;
      &:nth-child(2) {
        border-top: 1px solid #d2d2d2;
      }
    }

    .care-room,
    .care-wc {
      position: relative;
    	display: flex;
    	align-items: center;
    	justify-content: flex-start;
      box-sizing: border-box;
      .room-door{
        width: 6px;
        height: 90px;
        background-color: #999999;
        position: absolute;
        right: 0;
        bottom: 0;
        transition: all 2s;
        &::after{
          content: "";
          display: block;
          width: 6px;
          height: 48px;
          background-color: #F5F5F5;
          position: absolute;
          top: 18px;
          left: 0;
        }
        &::before{
          content: "";
          display: block;
          width: 47px;
          height: 4px;
          background: #FFFFFF;
          border: 1px solid #999999;
          position: absolute;
          top: 18px;
          left: -49px;
          transform: rotateZ(270deg);
          z-index: 1;
          transform-origin: right 0%;
        }
      }
    }

    .care-room>img {
    	width: 30px;
      margin-left: 5px;
    	// transform: rotateZ(270deg);
    	// position: absolute;
     //  right: 40px;
     //  bottom: 26px;
    }

    .care-room-name,
    .care-wc-name {
      width: 60px;
    	height: 100%;
    	font-size: 20px;
    	color: #333333;
    	text-align: center;
    	    display: flex;
    	    align-items: center;
    }

    .care-wc-right,
    .care-room-right {
    	padding-left: 15px;
    	position: relative;
    	display: flex;
    	justify-content: space-between;
    	align-items: center;
    	font-size: 20px;
    	color: #999999;
    }

    .care-room-right img{
    	/* position: absolute; */
    	width: 15px;
    	margin-right: 6px;
    }

    .care-room-right span{
    	margin-right: 11px;
    }

    .care-content {
      position: relative;
    	background-color: #F5F5F5;
    	height: 180px;
    	border-bottom-left-radius: 10px;
    	border-bottom-right-radius: 10px;
    	box-shadow: 0px 3px 6px rgb(0 0 0 / 23%);
    }

    .care-content > img{
      width: 30px;
      // transform: rotateZ(270deg);
      position: absolute;
      right: 40px;
      bottom: 26px;
    }

    /* switch开关 start */
    .switch-box{
        width: 70px;
    }
     .switch-box .switch{
        display:none;
    }
     .switch-box label{
        position:relative;
        display: block;
        padding: 1px;
        border-radius: 24px;
        height: 22px;
        background-color: #eee;
        cursor: pointer;
        vertical-align: top;
        -webkit-user-select: none;
    }
     .switch-box label:before{
        content: '';
        display: block;
        border-radius: 24px;
        height: 22px;
        background-color: #ABAFB3;
    		box-shadow: inset 0px 0px 2px #a19898;
        -webkit-transform: scale(1, 1);
        -webkit-transition: all 0.3s ease;
    }
     .switch-box label:after{
        content: '';
        position: absolute;
        top: 50%;
        left: 8px;
        margin-top: -14px;
        width: 28px;
        height: 28px;
        border-radius: 22px;
        background-color: #DDDFE0;
        box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.08);
    		transform: translateX(-9px);
    		-webkit-transform: translateX(-9px);
    		-ms-transform:translateX(-9px);
    		-moz-transform: translateX(-9px);
    		transition: all 0.3s ease;
    		-ms-transition: all 0.3s ease;
    		-moz-transition: all 0.3s ease;
        -webkit-transition: all 0.3s ease;
    }

    .switch-box label span{
    	position: absolute;
    	width: 13px;
    	height: 13px;
    	left: 7px;
    	top: 5px;
    	border-radius: 50%;
    	background-color: #B5B8BB;
    	z-index: 1;
    	transition: all 0.28s ease;
    	-ms-transition: all 0.28s ease;
    	-moz-transition: all 0.28s ease;
    	-webkit-transition: all 0.28s ease;
    }
     .switch-box .switch:checked~label:after{
    		transform: translateX(34px);
        -webkit-transform: translateX(34px);
    		-ms-transform: translateX(34px);
    		-moz-transform: translateX(34px);
    }
     .switch-box .switch:checked~label:before{
        background-color: #FC4B00;

    		box-shadow: inset 0px 0px 4px #e58181, 0px 0px 5px #d64541;
    }

     .switch-box .switch:checked~label span{
        background-color: #FC4B00;
    		/* left: 50px; */
    		transform: translateX(43px);
    		-webkit-transform: translateX(43px);
    		-ms-transform: translateX(43px);
    		-moz-transform: translateX(43px);
    	}
    /* switch开关 end */
    @media (min-width: 1200px) and (max-width: 1600px) {
    	.col-lg-3 {
    		width: 33.3%;
    	}
    }
  }
</style>
